<template>
  <view>
    <!-- 判断是否有children，如果有则递归，如果没有则直接显示 -->
    <view
      v-for="treeItem in treeDataFinal.children"
      :key="treeItem.id"
      style="padding-left: 40rpx"
    >
      <view v-if="treeItem.type === 'dir'" class="wh-40">{{
        treeItem.name
      }}</view>
      <TreeCollapse
        v-if="treeItem.children"
        :treeData="treeItem"
      ></TreeCollapse>
      <TreeItem v-if="treeItem.type === 'file'" :listItem="treeItem"></TreeItem>
    </view>
    <!-- <u-collapse v-if="treeDataFinal.children">
      <u-collapse-item
        v-for="treeItem in treeDataFinal.children"
        :key="treeItem.id"
        :title="treeItem.path"
      >
        <view style="padding-left: 20rpx">
          <tree-collapse :treeData="treeItem"></tree-collapse>
        </view>
      </u-collapse-item>
    </u-collapse>
    <TreeItem v-else :listItem="treeDataFinal"></TreeItem> -->
  </view>
</template>

<script>
import TreeItem from "../../components/luckysheet/TreeItem.vue";
export default {
  name: "TreeCollapse",
  components: {
    TreeItem,
  },
  props: {
    treeData: {
      type: [Array, Object],
    },
  },
  onLoad() {
    console.log(this.treeData, this.treeDataFinal);
  },
  computed: {
    treeDataFinal() {
      if (Array.isArray(this.treeData)) {
        return {
          children: this.treeData,
        };
      } else {
        return this.treeData;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wh-40 {
  height: 36rpx;
  font-size: 24rpx;
}
</style>
